<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3D地图</title>
<style>
    body,html{
     margin:0;
     padding:0;
     font:12px/16px Verdana,
     Helvetica,Arial,
     sans-serif;
     width: 100%;
     height: 100%
 }
 #container{
    height: 100%;
    width:100%;
    resize:both;
 }
 .amap-icon img{
    width: 25px;
    height: 34px;
}
.amap-overlay-text-container {
    border: none;
    background: transparent;
    color: orange;
    font-size: 20px;
}
</style>

</head>
<body >
    <div id="container"></div>
    <script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=b8e921bc75343332bbb52cc50900971a&callback=mapInit"></script>
    <script language="javascript">
function mapInit(){
     let map = new AMap.Map("container", {
         mapStyle: 'amap://styles/bf89d92d71a29e6d7197a50d0e2ad4be',
         zoom: 17,
         center: [116.4,39.92],
         resizeEnable: true,
         rotateEnable:false,
         pitchEnable:false,
         pitch:65, //仰视角度
         rotation:23, //旋转角度
         viewMode:'3D',//开启3D视图,默认为关闭
         expandZoomRange:true,
         zooms:[3,20],
        });
    let position = [
        {
            offsetX:116.4,
            offsetY:39.92,
            icon:"http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
            sign:'杭州'
        },
        {
            offsetX:116.401,
            offsetY:39.92,
            icon:"http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
            sign:'西湖区'
        },
        {
            offsetX:116.402,
            offsetY:39.92,
            icon:"http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
            sign:'上城区'
        },
        {
            offsetX:116.401,
            offsetY:39.921,
            icon:"http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
            sign:'下城区'
        },
        {
            offsetX:116.401,
            offsetY:39.922,
            icon:"http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png",
            sign:'滨江区'
        }
    ]
    var arr = []
    for(let i of position){
        var viaMarker = new AMap.Marker({
        position: new AMap.LngLat(i.offsetX,i.offsetY),
        // 将一张图片的地址设置为 icon
        icon: i.icon,
        // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-13, -30),
        title: i.title
    });
        arr.push(viaMarker)
        viaMarker.setTitle(i.sign);
    }
    // 将 markers 添加到地图
     map.add(arr);

     let circleMarker = new AMap.CircleMarker({
          center:[116.403,39.922],
          radius:30+Math.random()*10,//3D视图下，CircleMarker半径不要超过64px
          strokeColor:'rgba(0,0,255,1)',
          strokeWeight:2,
          strokeOpacity:0.5,
          fillColor:'rgba(0,0,255,0.1)',
          fillOpacity:0.5,
          zIndex:9999,
          bubble:true,
          cursor:'pointer',
          clickable: true
        })

    circleMarker.setMap(map)

    let text = new AMap.Text({
            position: [116.403,39.922],
            text: '嘉兴市社会治理综合指挥中心',
            offset: new AMap.Pixel(0, -55)
        })
    map.add(text);
}
</script>
</body>
</html>